<template>
    <div>
        <el-tree :data="treeList" :props="treeProps" show-checkbox></el-tree>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { menuResourceApi, treeListApi } from "./api";

// 存数据
const treeList = ref<ItreeMenu[]>([]);
const router = useRouter()
const route = useRoute()

treeListApi().then((res) => {
    if (res.code === 200) {
        treeList.value = res.data;
        console.log("re", res);

    }
});

// 点击确定
const clickHandle = () => {
    ElMessageBox.confirm('确定要保存吗', '分配资源', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        menuResourceApi({
            roleId: parseInt(route.query.id as string),
            //获取所有数据，传回后台修改
            // resourceIds: state.value?.reduce<number[]>((prev, next) => {
            //     return prev.concat(next.checkeds);
            // }, [])
        }).then((res) => {
            if (res.code === 200) {
                ElMessage.success('保存成功')
                router.push('/ums/role')
            }
        })
    })

}
// 点击清空
const empty = () => {
    // state.value?.map(item => item.checkeds = [])

}


const treeProps = {
    children: 'children',
    label: 'title',
}

</script>

<style lang="less" scoped>

</style>